<template>
  <div class="area">
    <Headline
      :headline1="$t('m.EquipmentCenter') + '  /  '"
      :headline2="$t('m.AreaAndBuilding')"
    ></Headline>
    <a-card style="width: 100%">
      <div class="search-a ov_flex">
        <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="width: 200px"
          v-model="key"
          @search="onSearch"
        />
        <div class="btn-dispo">
          <a-button type="primary" @click="areabtn">{{ $t("m.Add") }}</a-button>
        </div>
      </div>
      <!-- tree表单 -->
      <a-table
        class="tree"
        :columns="columns"
        :data-source="items"
        :expanded-row-keys.sync="expandedRowKeys"
        :rowKey="(record) => record.id"
        bordered
        :expandedRowKeys="RowKeys"
        @expand="itema"
      >
        <!-- 操作 -->
        <div slot="tags" slot-scope="text, tags">
          <a-button
            class="btn"
            type="primary"
            icon="plus-square"
            :disabled="!isTrue('dev:area:add')"
            @click="unitadd(tags)"
            >{{ $t("m.Add") }}</a-button
          >
          <a-button
            class="btn"
            type="primary"
            icon="edit"
            @click="changarea(tags)"
            >{{ $t("m.Modification") }}</a-button
          >
          <a-button
            class="btn"
            :disabled="!isTrue('dev:area:del')"
            type="danger"
            icon="delete"
            @click="unitDelete(tags)"
            >{{ $t("m.Delete") }}</a-button
          >
        </div>
      </a-table>
    </a-card>
    <Delete ref="unitdelete" :dalete="dalete" @confirm="addunit"></Delete>
    <Modal :modal="modal" @modalLast="areaOk" @modalhand="areahand">
      <a-form :label-col="{ span: 5 }" class="labelOk" :form="forms">
        <a-form-item :label="$t('m.Type')" class="flex-dev" >
        <a-select
          class="select-a"
          @change="areaSelectChange"
          v-model="form.areaType"
        >
          <a-select-option
            v-for="item in dictionariesA"
            :value="item.code"
            :key="item.code"
            >{{ item.name}}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.Area')" class="flex-dev">
        <a-select
          class="select-a"
          @change="areaSelectChange"
          v-model="form.sexArea"
        >
          <a-select-option
            v-for="item in dictionariesB"
            :value="item.code"
            :key="item.code"
          >
            {{ item.name}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('m.Name')" class="flex-dev">
        <a-input
          v-decorator="['areaName',{ rules: [{ required: true, message: '请输入名称' }] },]"
          :placeholder="$t('m.PleaseEnterMessName')"
          size="large"
          style="width: 300px; height: 32px"
          v-model="form.areaName"
        />
      </a-form-item>
      </a-form>
    </Modal>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import { getAreaList, getDelArea, getSaveArea } from "@/api/perUnit";
import Delete from "@/components/Delete";
import { Delchildren } from "@/assets/js/setperms";
import Modal from "@/components/common/Modal";
import { getdiction } from "@/api/dictionaries";
import { Setperms } from "@/assets/js/setperms";
export default {
  name: "Unitarea",
  components: {
    Headline,
    Delete,
    Modal,
  },
  data() {
    return {
      checkNick: false,
      forms: this.$form.createForm(this, { name: 'coordinated' }),
      fromdic: {
        groupcode: "SYS0000013",

        where: "code<>3",
      },
      fromdicB: {
        groupcode: "SYS0000023",

        where: "1=1",
      },
      modal: {
        visible: false,
        width: "500px",
        title: this.$t("m.AddArea"),
      },
      btn: [
        {
          title: this.$t("m.Add"),
          type: "primary",
        },
        {
          title: this.$t("m.Modification"),
          type: "primary",
        },
        {
          title: this.$t("m.Delete"),
          type: "primary",
        },
      ],
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      items: [], //保存楼层数据
      columns: [
        {
          title: this.$t("m.Type"),
          dataIndex: "areatypename",
          align: "center",
        },
        {
          title: this.$t("m.regionalPlanning"),
          dataIndex: "sexname",
          align: "center",
        },
        {
          title: this.$t("m.Name"),
          dataIndex: "areaname",
          align: "center",
        },
        {
          title: this.$t("m.Operation"),
          key:"tags",
          dataIndex: "tags",
          align: "center",
          scopedSlots: { customRender: "tags" },
        },
      ],
      id: "",

      dictionariesA: [],
      dictionariesB: [],
      visibles: false,
      row: null,
      form: {
        id: 0,
        areaCode: "", //区域编号
        floors: 0, //		层级
        areaType: "1", //区域类型
        areaName: "", //区域名称
        sexArea: '0', //性别区域
        parentId: 0, //父区域id
      },
      key: "",
      expandedRowKeys: [],
      RowKeys: [],
    };
  },
  created() {
    this._getAreaList(); //请求数据
    this._getdiction();
    this.parms = Setperms(
      this.$route.fullPath,
      JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    _getdiction() {
      getdiction({ params: this.fromdic }).then((res) => {
        console.log(res);
        this.dictionariesA = res.data.data;
      });
      getdiction({ params: this.fromdicB }).then((res) => {
        console.log(res);
        this.dictionariesB = res.data.data;
      });
    },
    _getAreaList() {
      getAreaList()
        .then((res) => {
          if (res) {
            this.$message.success("获取区域数据成功");
            this.items = Delchildren(res.data);
          }
        })
        .catch((err) => {
          this.$message.error("获取区域数据失败");
        });
    },
    //  搜索框点击
    onSearch() {
      const key = this.key;
      getAreaList({ params: { key } })
        .then((res) => {
          if (res) {
            this.$message.success("获取搜索数据成功");
            this.items = Delchildren(res.data);
          }
        })

    },
    // 删除
    unitDelete(row) {
      this.id = row.id;
      this.$refs.unitdelete.visible = true;
    },
    //删除确定按钮点击
    addunit() {
      getDelArea({ id: this.id }).then((res) => {
        const msg = res.data.msg;
        if (res.data.success) {
          this.$refs.unitdelete.visible = false;
          this.$message.success(msg);
          this._getAreaList();
        } else {
          this.$refs.unitdelete.visible = false;
          this.$message.error(msg);
        }
      });
    },
    //打开一级菜单弹窗
    areabtn() {
      this.modal.visible = true;
    },
    //确定按钮点击
    areaOk() {
       this.forms.validateFields(err => {
        if (!err) {
          this.forms.resetFields();
          console.info('success');
        }
      });
      if(this.form.areaName != ""){
      getSaveArea(this.form)
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
            this._getAreaList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          this.$message.error("数据添加失败");
        });
      this.form.areaName = "";
      this.form.areaCode = "";
      this.form.sexArea = "0";
      this.form.floors = 0;
      this.form.id = 0;
      this.form.areaType = "1";
      this.form.parentId = 0;
      this.modal.visible = false;
      }
    },
    //添加按钮点击
    unitadd(row) {


      this.form.areaCode = row.areacode;
      this.form.parentId = row.id;
      this.form.floors = row._normalIndex;
      this.row = row;
      this.modal.visible = true;
    },
    //修改按钮的点击
    changarea(row) {
      console.log(row)
      console.log(row);
      this.form.areaCode = row.areacode;
      this.form.parentId = row.id;
      this.form.id = row.id;
      this.form.floors = row._normalIndex;
      this.form.areaType = row.areatype + "";
      this.form.sexArea = row.sexarea + "";
      this.form.areaName = row.areaname;
      this.modal.visible = true;
      setTimeout(() => {
        this.forms.setFieldsValue({
          areaName:row.areaname,
        })
      }, 200);
    },
    //取消按钮的点击
    areahand() {
      this.forms.resetFields();
      this.form.areaName = "";
      this.form.areaCode = "";
      this.form.sexArea = "0";
      this.form.floors = 0;
      this.form.id = 0;
      this.form.areaType = "1";
      this.form.parentId = 0;
      this.modal.visible = false;
    },
    areaSelectChange() {},
    itema(expanded, record) {
      console.log(expanded, record);
      if (expanded) {
        this.RowKeys.push(record.id);
      } else {
        this.RowKeys.forEach((item, index) => {
          if (item == record.id) {
            this.RowKeys.splice(index, 1);
          }
        });
      }
    },
  },
};
</script>

<style scoped  lang="scss">
.search-a {
  width: 600px;
}
.select-a {
  width: 300px;
}
.ov_flex {
  display: flex;
  align-items: center;
}
.flex-dev {
  display: flex !important;
  justify-content: center;
}
.btn-dispo {
  margin-left: 15px;
}
.tree{
  margin-top: 30px;
}
.btn{
  width: 73px;
  font-size: 10px;
  margin-left: 15px;
}
.labelOk{
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
}
.labelOk /deep/ .ant-form-item{
  display: flex;
  width: 500px;
}
.labelOk /deep/ .ant-form-item .ant-form-item-control-wrapper{
  width: 100%;
}
.labelOk .wiebutton /deep/ .ant-form-item-control{
  display: flex;
  justify-content: flex-end;
}
</style>
